<template>
  <div class="sub-out">
    <div class="search   border_style bg_style">
      <YsInput class="search-input" clearable @on-focus="clickBlur(true)" @on-blur="clickBlur(false)"
        @on-enter="getSheBeiBuWei" v-model.trim="pege_param.keyword" placeholder="关键字">
        <YsIcon type="icon iconfont icon-sousuo" @click.native="getSheBeiBuWei"
          :style="{color: inputFocus?'#405680':'rgba(64,86,128,0.6)'}" slot="suffix" />
      </YsInput>
      <YsButton type="primary" class="searchBtn" @click="getSheBeiBuWei">查询</YsButton>
      <div class="open-btn">
        <YsButton @click="addSheBeiBuWei" class="right-between">新增</YsButton>
      </div>
    </div>
    <proTable class="table-st  border_style bg_style" :loading="page.tableLoad" :columns="page.columns"
      :data="page.data" @clickPage="onClickPage" :current="pege_param.start_recd" :total="page.allTotal"
      :pageSize="pege_param.limit_recd">
    </proTable>

    <pro-dialog class="setdialog" ref="sbbwDom" width="628" :nopadding="true" :title="flawTypeflag ?'新增设备类型':'编辑设备类型'">
      <div style="padding: 32px 50px 32px 40px">
        <YsForm ref="sheBeiBuWeiform" :model="partInfo" :label-width="140" :rules="app_rule">
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="设备类型名称" prop="ep_name">
                <YsInput size="large" :maxlength="100" v-model="partInfo.ep_name"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="设备类型控制码" prop="ep_control_code">
                <YsInput size="large" :maxlength="20" v-model="partInfo.ep_control_code"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="备注">
                <YsInput size="large" maxlength="200" placeholder="最长可输入200字符" type="textarea" class="hg100"
                  v-model="partInfo.remark"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
        </YsForm>
        <YsRow class="foot-btn" style="margin-top: 10px">
          <YsButton @click="handleCancel()" size="large">关闭</YsButton>
          <YsButton @click="handleOk('sheBeiBuWeiform')" :disabled="btnDisabled" size="large" type="primary">确定</YsButton>
        </YsRow>
      </div>
    </pro-dialog>
  </div>
</template>


<script>
import { mapActions } from "vuex";

export default {
  name: "SheBeiBuWei",

  data() {
    return {
      btnDisabled:false,
      inputFocus: false,
      pege_param: {
        keyword: "",
        start_recd: 1, //开始数据
        limit_recd: 10, //查询的条数
      },
      flawTypeflag: true,
      partInfo: {
        ep_control_code: "",//设备类型控制码
        ep_name: "", //设备类型名称
        remark: "",//备注
      },
      app_rule: {
        ep_name: [
          { required: true, message: "设备类型不能为空", trigger: "blur" },
        ],
        ep_control_code: [
          { required: true, message: "设备类型控制码不能为空", trigger: "blur" },
          { pattern: /^[a-z0-9]+$/i, message: "只能输入字母和数字", trigger: "blur" }
        ],
      },
      page: {
        subscribeState: 0,
        tableLoad: false,
        allTotal: 0,
        columns: [
          {
            title: "顺序号",
            tooltip: true,
            width: 80,
            render: (h, params) => {
              return h(
                "span",
                params.index +
                (this.pege_param.start_recd - 1) *
                this.pege_param.limit_recd +
                1
              );
            },
          },
          {
            title: "名称",
            minWidth: 80,
            tooltip: true,
            key: "ep_name",
          },
          {
            title: "编号",
            minWidth: 80,
            tooltip: true,
            key: "ep_code",
          },
          {
            title: "控制码",
            minWidth: 100,
            tooltip: true,
            key: "ep_control_code",
          },
          {
            title: "备注",
            minWidth: 100,
            tooltip: true,
            key: "remark",
          },
          {
            title: "操作",
            width: 150,
            // align: "center",
            render: (h, params) => {
              return h(
                "div",
                {
                  attrs: { class: "mouse-on" },
                },
                [
                  h("span", {
                    // class: ["iconfont", "icon-bianji"],
                    on: {
                      click: (event) => {
                        this.exitQuexianItem(params.row);
                        event.stopPropagation();
                      },
                    },
                    class: "textColor",
                  }, '编辑'),
                  h("span", {
                    domProps: {
                      title: "删除",
                    },
                    // class: ["iconfont", "icon-a-lujing22614"],
                    on: {
                      click: (event) => {
                        this.handleDlelteItem(params.row);
                        event.stopPropagation();
                      },
                    },
                    class: "textColor",
                  }, '删除'),
                ]
              );
            },
          },
        ],
        data: [],
      },
    };
  },

  methods: {
    ...mapActions(["getPageEquPart", "setpartDelete", "setPartEdit", "setPartAdd"]),
    //获取服务列表
    getSheBeiBuWei() {
      let _this = this;
      this.page.tableLoad = true;
      _this.getPageEquPart(this.pege_param).then((res) => {
        let { data, msg, scode, status } = res;
        _this.page.tableLoad = false;
        if (status === "ok") {
          this.page.data = data.partInfos;
          this.page.allTotal = data.all_recd;
        } else {
          _this.$YsMessage.error(msg);
          this.page.data = [];
          this.page.allTotal = 0;
        }
      }).catch((err) => {
        _this.page.tableLoad = false;
        _this.$YsMessage.error("获取数据失败");
      });
    },
    //分页
    onClickPage(pageNum) {
      this.pege_param.start_recd = pageNum;
      this.getSheBeiBuWei();
    },
    //新增弹出框
    addSheBeiBuWei() {
      this.flawTypeflag = true
      this.partInfo = this.$options.data().partInfo
      this.$refs.sheBeiBuWeiform.resetFields()
      this.$refs.sbbwDom.show()
    },
    //取消
    handleCancel() {
      this.$refs.sbbwDom.close()
    },
    //确认按钮
    handleOk(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.flawTypeflag) {
            this.addSheBeiItem()
          } else {
            this.exitShebeiItem()
          }
        }
      });
    },
    //编辑功能
    exitQuexianItem(item) {
      this.$refs.sheBeiBuWeiform.resetFields()
      this.flawTypeflag = false
      this.partInfo = {
        id: item.id,
        ep_control_code: item.ep_control_code,
        ep_name: item.ep_name,
        remark: item.remark,
      }
      this.$refs.sbbwDom.show()
    },
    //编辑
    exitShebeiItem() {
      let _this = this
      this.btnDisabled = true
      _this.setPartEdit({ partInfo: this.partInfo }).then((res) => {
        let { data, msg, scode, status } = res;
        this.btnDisabled = false
        if (status === "ok") {
          _this.$YsMessage.success(data.message_text)
          _this.$refs.sbbwDom.close()
          _this.getSheBeiBuWei()
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        this.btnDisabled = false
      });
    },
    //新增
    addSheBeiItem() {
      let _this = this
      this.btnDisabled = true
      _this.setPartAdd({ partInfo: this.partInfo }).then((res) => {
        let { data, msg, scode, status } = res;
        setTimeout(function () {
          _this.btnDisabled = false
        }, 500)
        if (status === "ok") {
          _this.$YsMessage.success(data.message_text)
          _this.$refs.sbbwDom.close()
          _this.getSheBeiBuWei()
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        this.btnDisabled = false
      });
    },
    //删除操作
    handleDlelteItem(item) {
      let _this = this;
      this.$YsModal.confirm({
        title: "删除",
        content: "<p>确认是否删除！</p>",
        onOk: () => {
          _this.setpartDelete({ partInfo: { id: item.id } }).then((res) => {
            let { data, msg, scode, status } = res;
            if (status === "ok") {
              _this.$YsMessage.success("删除成功");
              _this.getSheBeiBuWei();
            } else {
              _this.$YsMessage.error(msg);
            }
          }).catch((err) => {
            _this.$YsMessage.error("删除失败");
          });
        },
      });
    },
    //获取焦点失去焦点
    clickBlur(flag) {
      this.inputFocus = flag
    }
  },
  mounted() {
    this.getSheBeiBuWei();
  },
};
</script>
<style lang="less" scoped>
.search {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 72px;
  border: 1px solid #cfd7e5;
  border-radius: 4px;
  margin-bottom: 8px;

  .open-btn {
    margin-left: auto;
  }

  .search-input {
    height: 40px;
    width: 208px;
    margin-right: 10px;
    border-radius: 4px;
  }

  .search-btn {
    margin-left: auto;
  }
}

/deep/.setAllStyle {
  width: 81px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
}

/deep/.setStyle1 {
  background: #13b38f;
}

/deep/.setStyle2 {
  background: rgba(0, 145, 255, 1);
}

/deep/.setStyle3 {
  background: #e77930;
}

/deep/.setStyle4 {
  background: #d53939;
}

// /deep/.mouse-on {
//   color: red;
// }
/deep/ .mouse-on {
  .icon-bianji:hover {
    cursor: pointer;
    color: #0091ff;
  }
}

/deep/ .mouse-on {
  .icon-a-lujing22614:hover {
    cursor: pointer;
    color: #d53939;
  }
}

/deep/ .hg100 {
  textarea {
    height: 100px;
  }
}

/deep/ .textColor {
  // color: '#0091FF';
  color: #0091ff;

  margin-right: 8px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
}

.right-between {
  width: 80px;
  min-width: 80px;
  height: 40px;
  background: rgba(255, 255, 255, 0.39);
  border: 1px solid #0061ff;
  opacity: 1;
  border-radius: 4px;
  color: #0091ff;
  font-size: 16px;
  font-family: PingFang SC;
}

.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}

.table-st {
  border: 1px solid #cfd7e5;
  border-radius: 4px;
}
</style>
